<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        .countdown {
            width: 240px;
            height: 305px;
            text-align: center;
            line-height: 1;
            color: #fff;
            background-color: brown;
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden;
        }

        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px;
        }

        .countdown .title {
            font-size: 33px;
        }

        .countdown .tips {
            margin-top: 80px;
            font-size: 23px;
        }

        .countdown small {
            font-size: 17px;
        }

        .countdown .clock {
            width: 142px;
            margin: 18px auto 0;
            overflow: hidden;
        }

        .countdown .clock span,
        .countdown .clock i {
            display: block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            float: left;
        }

        .countdown .clock span {
            width: 34px;
            height: 34px;
            border-radius: 2px;
            background-color: #303430;
        }

        .countdown .clock i {
            width: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
<div class="countdown">
    <p class="next">今天是2025年8月4日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
        <span id="hour">00</span>
        <i>:</i>
        <span id="minutes">25</span>
        <i>:</i>
        <span id="scond">20</span>
    </p>
    <p class="tips">18:00:00下课</p>
</div>

<script>

    function getCountTime() {
        //得到当前时间
        let now = +new Date(); //把得到的字符转换成数字
        let future = +new Date("2025-8-4 18:00:00")
        /*console.log(now)
        console.log(future)*/
        let time =(future-now)/1000 //返回的时间戳是以毫秒（milliseconds）为单位的
        // console.log(time)
        let h=parseInt(time/60/60%24 )
        let m=parseInt(time/60%60)
        let s=parseInt(time%60)
        var hour = document.querySelector("#hour");
        var minutes = document.querySelector("#minutes");
        var scond = document.querySelector("#scond");

        hour.innerHTML = h;
        minutes.innerHTML = m;
        scond.innerHTML = s;
    }
   getCountTime();
   setInterval(getCountTime,1000)

</script>
</body>
</html>